<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>7_前端路由history</title>
</head>

<body>
  <a href="http://www.atguigu.com" onclick="return push( '/test1') ">push test1</a><br><br/>
  <button onclick="push( '/test2' )">push test2</button><br/><br/>
  <button onclick="replace( '/test3' )">replace test3</button><br/><br/>
  <button onClick="back()">&1t;=回退</button>
  <button onclick="forword()">前进=&gt;</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/history/4.7.2/history.js"></script>
<script>
  // let history = History.createBrowserHistory()  // 方法一，直接使用H5推出的history身上的的API
  let history = History.createHashHistory()     // 方法二，hash跳转，类似锚点跳转
  function push (path) {
    history.push(path)
    return false
  }

  function replace (path) {
    history.replace(path)
  }

  function back () {
    history.goBack()
  }

  function forword () {
    history.goForward()
  }

  history. listen((location) => {
    console.log('请求路由路径变化了', location)
  })

</script>
</html>